import React from "react";

const CartItem = ({
    index,
    item,
    addItem,
    subItem,
    removeItem,
    toggleSelection,
}: CartItemProps) => {
    return (
        <li className="item">
            <div className="sel-box">
                <input
                    type="checkbox"
                    checked={item.selected}
                    onChange={() => toggleSelection(index)}
                />
            </div>

            <div className="imgname-box">
                <img src={"/img/" + item.img} alt="item" />
                <span>{item.name}</span>
            </div>

            <div className="price-box">
                ￥<span className="price">{item.price}</span>
            </div>

            <div className="count-box">
                <button onClick={() => subItem(index)}>-</button>
                <input
                    value={item.count}
                    onChange={(newVal) => {
                        console.log(newVal);
                    }}
                />
                <button
                    onClick={() => {
                        console.log("on + click", index);
                        addItem(index);
                    }}
                >
                    +
                </button>
            </div>

            <div className="amount-box">
                <span className="price">
                    {(item.price * item.count).toFixed(2)}
                </span>
            </div>
            <div className="action-box">
                <a href="#" onClick={() => removeItem(index)}>
                    移除商品
                </a>
            </div>
        </li>
    );
};

export default CartItem;
